<template>
  <el-card>
    <div class="table">
      <!-- 表格 -->
      <el-table v-loading="loading" :data="deleteRequestList" style="width: 100%">
        <el-table-column v-for="item in deleteRequestTableLabel" :key="item.prop" :label="item.label" :prop="item.prop"
          :width="item.width" :sortable="item.sortable" />
        <el-table-column :filters="[{ text: '申请中', value: 0 }, { text: '已通过', value: 1 }, { text: '通过', value: 2 }]"
          prop="status" label="申请状态" :filter-method="filterTag">
          <template v-slot="scope">
            <el-tag size="small" v-if="scope.row.status === 0" type="warning">申请中</el-tag>
            <el-tag size="small" v-else-if="scope.row.status === 1" type="success">已通过</el-tag>
            <el-tag size="small" v-else type="danger">不通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template v-slot="scope">
            <el-button type="primary" size="small" @click="getDeleteRequestDetail(scope.$index), dialogVisible = true">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination background layout="prev, pager, next" :total="config.total" class="pager mt-4"
        @current-change="changePage" :page-size="config.size" />
    </div>
  </el-card>

  <!-- 查看申请信息的模态框 -->
  <el-dialog v-model="dialogVisible" title="关店申请详情" width="50%">

    <!-- 申请信息展示表格 -->
    <el-descriptions :column="1" size="default" border>
      <el-descriptions-item label="关店申请ID" label-align="center" align="center">
        {{ storeDeleteRequestDetail.storeDeleteRequest.storeDeleteRequestId }}
      </el-descriptions-item>
      <el-descriptions-item label="商店ID" label-align="center" align="center">
        {{ storeDeleteRequestDetail.storeDeleteRequest.storeId }}
      </el-descriptions-item>
      <el-descriptions-item label="申请发起时间" label-align="center" align="center">
        {{ storeDeleteRequestDetail.storeDeleteRequest.initiateTime }}
      </el-descriptions-item>
      <el-descriptions-item label="申请审核时间" label-align="center" align="center">
        {{ storeDeleteRequestDetail.storeDeleteRequest.processTime }}
      </el-descriptions-item>
      <el-descriptions-item label="申请状态" label-align="center" align="center">
        <el-select v-model="storeDeleteRequestDetail.storeDeleteRequest.status" placeholder="Select">
          <el-option label="申请中" :value="0" :disabled="true" />
          <el-option label="通过" :value="1" />
          <el-option label="不通过" :value="2" />
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="审核意见" label-align="center">
        <el-input v-model="storeDeleteRequestDetail.storeDeleteRequest.info" type="textarea" placeholder="请输入审核意见" />
      </el-descriptions-item>
    </el-descriptions>

    <!-- 底部的按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">
          取消
        </el-button>
        <el-button :disabled="originStatus !== 0" type="primary" @click="handleProcessRequest()">
          保存审核
        </el-button>
      </span>
    </template>

  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref, reactive } from 'vue'

const { proxy } = getCurrentInstance();

let deleteRequestList = ref([]);

// 控制表格加载遮罩窗是否出现
let loading = ref(false);

const deleteRequestTableLabel = reactive([
  {
    prop: "storeDeleteRequestId",
    label: "关店申请ID",
    // width: 220,
    sortable: true,
  },
  {
    prop: "storeId",
    label: "商店ID",
    // width: 220,
    sortable: true,
  },
  {
    prop: "initiateTime",
    label: "发起时间",
    // width: 220,
    sortable: true,
  },
  {
    prop: "processTime",
    label: "审核时间",
    // width: 220,
    sortable: true,
  },
]);

const config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
})

const getDeleteRequestList = async () => {
  // 开启加载遮罩
  loading.value = true;
  // 发起请求
  let res = await proxy.$api.store.getDeleteRequestList({
    current: config.current,
    size: config.size,
  });
  // 更新表格数据
  deleteRequestList.value = res.data.storeDeleteRequestList
  config.total = res.data.total
  // 关闭加载遮罩
  loading.value = false;
};

const changePage = async (page) => {
  // 更新当前页码
  config.current = page
  await getDeleteRequestList()
}

let filterTag = (value, row) => {
  return row.status === value;
}

onMounted(async () => {
  await getDeleteRequestList();
});

// 控制模态框的显示和隐藏
let dialogVisible = ref(false)

const handleProcessRequest = async () => {
  let ret = await ElMessageBox.confirm(
    '确认后将无法更改，确定保存该申请审核吗？',
    '确认审核',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    });
  if (ret === 'confirm') {
    let res = await proxy.$api.store.processDeleteRequest(storeDeleteRequestDetail.storeDeleteRequest).catch(error => {
      console.log(error);
      dialogVisible.value = false;
    });
    if (res.status === 200) {
      ElMessage.success({
        showClose: true,
        message: '审核成功',
      })
    }
    dialogVisible.value = false;
    // 重新获取一下页面
    await getDeleteRequestList();
  }
}

// 关店申请表单信息
let storeDeleteRequestDetail = reactive({
  // 再定义一层属性名，避免赋值失败
  storeDeleteRequest: {
    "storeDeleteRequestId": "",
    "initiateTime": "",
    "processTime": "",
    "userId": "",
    "storeName": "",
    "category": [],
    "idCardNumber": "",
    "storeProfile": "",
    "filingAddress": "",
    "registeredCapital": 0.0,
    "pictures": [],
    "status": 1,
    "info": ""
  }
});

// 当前查看详情对应索引号
let currentIndex = ref(0);
// 原本的申请状态
let originStatus = ref(0);
// 直接从deleteRequestList中根据index获取
const getDeleteRequestDetail = async (index) => {
  // 更新详情对应索引
  currentIndex.value = index;
  // 更新原初状态
  originStatus.value = deleteRequestList.value[index].status;
  storeDeleteRequestDetail.storeDeleteRequest = deleteRequestList.value[index];
};

</script>

<style lang="less" scoped>
.table {
  position: relative;

  .pager {
    position: relative;
    bottom: -15px;
    justify-content: flex-end;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 15px;
  }
}
</style>